<template>
  <div>
    <h3>输入框el-input</h3>
    <!-- 组件名：el-input
           属性：  v-model:双向绑定
                   prefix-icon:头部图标
                   show-password：是否显示密码框
     -->
    <el-input v-model="msg" prefix-icon="el-icon-user-solid" show-password />
    <h3>按钮</h3>
    <!-- 组件名：el-button
           属性:   type="primary"  主要按钮
     -->
    <el-button type="primary">登录</el-button>
    <hr>
    <!-- 表单
       1：el-form
             label-width:标题的宽度
              el-form-item  表单的子项
                  label:标题的名字
     -->
    需求：完成一个基本的登录样式 有用户名：输入框 密码：输入框 登录按钮
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" show-password />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('form')">登录</el-button>
      </el-form-item>
    </el-form>
    <!-- 管理系统里面：最重要的组件应该是什么 表单表格
       表单：表单验证（难度较大）
       基本表单验证
            1：表单元素的值要绑定
            2：el-form
                    :model="整个表单元素的值"
                    :rules=表单验证的规则{}
                        {
                            prop的值:[
                            {required:true,message:'错误信息',trigger:'blur/change'},
                            {min:最小长度,max:最大长度,message:'错误信息',trigger:'blur/change'},
                            {pattern:正则表达式,message:'错误信息',trigger:'blur/change'}
                            ]
                        }
            3:el-form-item
                    prop:它的值就是对应表单元素值的字段名

        全局表单验证
          1：el-form  ref="xxx"
          2:this.$refs.xxx.validate((result)=>{
          result:验证是否成功的结果
             成功：true
             失败：false
          })

          自定义表单验证
             用户名是否包含xxx字段 ，后端提供了一堆黑名单用户，不允许登录
             rules:{
                prop的值:[
                {....},
                {
                    validator:(rule,value,callback)=>{
                        rule:规则
                        value:当前验证项的值
                        callback:回调函数
                          验证成功：callback()
                          验证失败：callback(new Error('错误信息'))
                    },
                    trigger:'change/blue'
                }
                ]

             }
             props:{
                value:{
                    // 要求只能是  0和1
                    type:Number,
                    validator:(value)=>{
                        if(value===0 ||  value===1){
                            return true
                        }
                        return false
                    }
                }
             }

    -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '',
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '必填', trigger: 'change' },
          { min: 3, max: 6, message: '3-6位用户名', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              // includes:验证是否包含（数组字符串通用）  某个值.includes(字符)  验证某值是否包含某字符
              if (value.includes('xxx')) {
                callback(new Error('黑名单用户'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ],
        password: [
          { required: true, message: '必填', trigger: 'change' },
          { min: 6, max: 12, message: '6-12位密码', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submit(str) {
      this.$refs[str].validate((result) => {
        if (result) {
          console.log('验证成功')
        } else {
          console.log('验证失败')
        }
      })
    }
  }
}
</script>

<style></style>
